<template>
    <el-drawer
            title="客户详情"
            :visible.sync="drawer"
            size="50%"
            :modal="false"
            :with-header="false">

        <div style="padding: 20px" v-if="currentPanel == 'default'">
            <el-card>
                <div style="display:flex;justify-content: space-between">
                    <div style="display:flex;">
                        <el-avatar shape="square"
                                   src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>

                        <div style="display:flex;flex-direction: column;justify-content: space-around;font-size: 14px;margin-left: 10px">
                            <div>姓名：{{ detailData.clientName }}</div>
                            <div>微信名称：{{ detailData.clientName }}</div>
                        </div>
                    </div>
                    <div style="display:flex;flex-direction: column;justify-content: space-around;">
                        <el-button plain size="small" @click="currentHandle('task')">创建待办</el-button>
                    </div>
                </div>
            </el-card>

            <div class="interspaceH"></div>

            <div style="display:flex;">
                <el-card style="flex: 3">
                    <el-descriptions class="margin-top" title="客户画像" :column="1" :labelStyle="{width : '60px'}">
                        <el-descriptions-item label="客户阶段">{{ detailData.clientStatus != null ? detailData.clientStatus : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="客户意向">{{ detailData.clientIntent != null ? detailData.clientIntent : '---'}}</el-descriptions-item>
                        <!-- <el-descriptions-item label="电话">{{ detailData.clientPhone != null ? detailData.clientPhone : '---'}}</el-descriptions-item> -->
                        <el-descriptions-item label="描述">{{ detailData.clientDescription != null ? detailData.clientDescription : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="姓名">{{ detailData.clientName != null ? detailData.clientName : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="客户来源">{{ detailData.clientSource != null ? detailData.clientSource : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="性别">{{ detailData.clientSex != null ? detailData.clientSex : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="生日">{{ detailData.clientBirthday != null ? detailData.clientBirthday : '---'}}</el-descriptions-item>
                    </el-descriptions>

                    <el-divider></el-divider>

                    <el-descriptions class="margin-top" :column="1" :labelStyle="{width : '60px'}">
                        <el-descriptions-item label="客户标签">
                            <div v-if="detailData.customerLabel == null || detailData.customerLabel.length == 0">---</div>
                            <el-tag size="small" v-for="(item, index) in detailData.customerLabel" :key="index">{{ item }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="内容标签">
                            <div v-if="detailData.contentLabel == null || detailData.contentLabel.length == 0">---</div>
                            <el-tag size="small" v-for="(item, index) in detailData.contentLabel" :key="index">{{ item }}</el-tag>
                        </el-descriptions-item>
                        <!-- <el-descriptions-item label="个人标签">
                            <div v-if="detailData.personalTag == null || detailData.personalTag.length == 0">---</div>
                            <el-tag size="small" v-for="(item, index) in detailData.personalTag" :key="index">{{ item.clientTagsName }}</el-tag>
                        </el-descriptions-item> -->
                    </el-descriptions>

                    <el-descriptions class="margin-top" title="客户跟进" :column="1" :labelStyle="{width : '60px'}">
                        <el-descriptions-item label="上次跟进">{{ detailData.clientBirthday != null ? detailData.clientBirthday : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ detailData.joinTime != null ? detailData.joinTime : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="添加好友">{{ detailData.joinTime != null ? detailData.joinTime : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="负责人">
                            <div>{{ detailData.empData.empName != null ? detailData.empData.empName : '---'}}</div>
                        </el-descriptions-item>
                        <el-descriptions-item label="协作人">---</el-descriptions-item>
                        <el-descriptions-item label="客户id">
                            <el-popover
                                    placement="top-start"
                                    title="ID信息"
                                    width="350"
                                    trigger="hover">
                                <div>external_userid:</div>
                                <div style="display:flex;justify-content: space-between">
                                    <div>{{ detailData.externalUserId != null ? detailData.externalUserId : '---'}}</div>
                                    <el-button type="text" style="padding: 0;" v-clipboard:copy="detailData.externalUserId != null ? detailData.externalUserId : '---'"
                                               v-clipboard:success="copy" v-clipboard:error="copyError">复制
                                    </el-button>
                                </div>

                                <el-button slot="reference" type="text" style="padding: 0;">查看</el-button>
                            </el-popover>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions class="margin-top" title="员工信息" :column="1" :labelStyle="{width : '60px'}" v-if="detailData.empData != null">
                        <el-descriptions-item label="员工部门">{{ detailData.empData.deptName != null ? detailData.empData.deptName : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="员工名称">{{ detailData.empData.empName != null ? detailData.empData.empName : '---'}}</el-descriptions-item>
                        <el-descriptions-item label="员工电话">{{ detailData.empData.empPhone != null ? detailData.empData.empPhone : '---'}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <div style="flex: 0.1;"></div>

                <el-card style="flex: 6;" >
                    <ClientAbout v-if="drawer" :clientInfo="detailData"/>
                </el-card>
            </div>
        </div>
        <div v-if="currentPanel == 'task'">
            <CreateTask @currentHandle="currentHandle" :clientInfo="detailData"/>
        </div>
    </el-drawer>
</template>

<script>
import Clipboard from 'clipboard';
import ClientAbout from "@/views/customer/client/client_about";
import CreateTask from "@/views/customer/client/create_task";

const empData = {
    companyWxId: "",
    deptId: "",
    deptName: "",
    empId: "",
    empJob: "",
    empName: "",
    empPhone: "",
    userId: ""
}

//多选框 - 开始
const clientSource = [
    {
        value: '0',
        label: '手机添加'
    },
    {
        value: '1',
        label: '活动添加'
    }
]

const clientType = [
    {
        value: '-1',
        label: '黑名单'
    },
    {
        value: '1',
        label: '正常'
    },
    {
        value: '2',
        label: '流失客户'
    },
    {
        value: '3',
        label: '客户公海'
    }
]

const clientSex = [
    {
        value: '1',
        label: '男'
    },
    {
        value: '0',
        label: '女'
    }
]
//多选框 - 结束

export default {
    name: "clientDetail",
    components: {ClientAbout, CreateTask},
    data() {
        return {
            currentPanel: 'default',
            drawer: false,
            detailData: {
                empData: {
                    ...empData
                }
            },
            dictionary: {
                clientSource: clientSource,
                clientType: clientType,
                clientSex: clientSex
            },
            fieldType: {
                clientSex: "array",
                clientSource: "array",
                clientType: "array",
            },
        }
    },
    mounted() {
        this.datetime = this.$moment(this.datetime).format("YYYY-MM-DD HH:mm")
        // console.log(this.detailData)
    },
    methods: {
        open(bln, data) {
            this.drawer = bln
            this.detailData = data
            this.init()
        },
        init() {
            let that = this

            that.$request("/client/getById/"+that.detailData.clientId, '', "POST").then((data) => {
                // data['data']['empData'] = {...empData}
                // that.detailData = this.$utils.formatterForForm(data.data, that.fieldType, that.dictionary);
                that.detailData = data.data
            }).then(() => {

                
            })
            that.$request("/emps/getStaffInfo/"+that.detailData.empId, '', "POST").then((empData) => {
                    that.detailData['empData'] = empData.data;
                    console.log(that.detailData.empData)
                })
        },
        copy() {
            this.$message({message: `复制成功`, showClose: true, type: 'success'})
        },
        copyError() {
            this.$message({message: '复制失败,', showClose: true, type: 'error'})
        },
        currentHandle(e) {
            this.currentPanel = e
        }
    }
}
</script>

<style scoped>

</style>
